import React, { ReactElement, InputHTMLAttributes, ChangeEvent } from 'react';
import classNames from 'classnames';
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import Icon from "../Icon/icon.tsx";

export type InputSize = 'lg' | 'sm';

export interface IInputProps extends Omit<InputHTMLAttributes<HTMLElement>, "size"> {
    /**是否禁用 */
    disabled?: boolean;
    size?: InputSize;
    icon?: IconProp;
    prepend?: string | ReactElement; // 前缀
    append?: string | ReactElement; // 后缀
    className?: string;
    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
}
const Input: React.FC<IInputProps> = (props) => {
    const { disabled, size, icon, prepend, append, children, className, style, ...restProps } = props;
    const classes = classNames('input-wrapper', className, {
        [`input-size-${size}`]: size,
        'is-disabled': disabled,
        'input-group': prepend || append,
        'input-group-prepand': !!prepend,
        'input-group-append': !!append
    });
    const fixControlledValue = (value: any) => {
        if (typeof value === "undefined" || value === null) {
            return "";
        }
        return value;
    };
    if ("value" in props) {
        // value与dafaultValue不共存
        delete restProps.defaultValue;
        restProps.value = fixControlledValue(props.value);
    }

    return (
        <div className={classes} style={style}>
            {prepend && <div className="input-group-prepand">{prepend}</div>}
            {icon && <div className='icon-wrapper'><Icon icon={icon}></Icon></div>}
            <input className='input-inner' title='inner' disabled={disabled} {...restProps}></input>
            {append && <div className="input-group-append">{append}</div>}
        </div>
    );
}
export default Input;